<template>
    <div class="topNav">
        <div class="top"></div>
        <div class="down">
            <div class="search-container">
                <input type="text"
                class="search-input"
                placeholder="搜索护工、医院、医疗资讯">
                <svg class="icon1" aria-hidden="true">
            <use xlink:href="#icon-fangdajing"></use>
      </svg>
            </div>
            <div class="topright">
            <span>贵阳市</span>
            <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-jiantou"></use>
</svg>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-gps"></use>
</svg>
        </div>
    </div>
</div>
</template>

<style scoped>
.top{
    width: 7.78rem;
   height: .88rem;
   background-color:#00BAAD;
 
}
.search-container{
    margin-top: 10px;
    margin-left: 10px;
    width:5.14rem;
    height: .68rem;
    position: relative;
    display: inline-block;
}
.icon1{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;


}

input{
    padding-left: 15px;
    width: 5.14rem;
    height: .68rem;
    border-radius: 35px;
    border: none;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
    display: inline-block;
}
.search-input::placeholder{
    color: #A6A6A6;
    font-size: .24rem;
    font-family: '思源黑体';
    
}
.topright{
    position: relative;
    display: inline-block;
    width: 2rem;
    height: .68rem;
}
span{
    margin-left: 15px;
    font-weight: bolder;
}


</style>